import React, { useState, useEffect } from 'react';
import { getClientW, PanelTitle, WaitUmd, BtImport, Ret } from '../../nui';

const CenterView = ({ children, className }) => (
    <div className="h-screen text-white bg-blue-800">
        <div className={"container mx-auto h-full flex justify-center items-center " + className}>
            {children}
        </div>
    </div>
);

/* himport: himport(data, umd)
*/
const ImView = ({ children, umd, himport, label, left, right, hreturn, cl="orange" }) => {
    const Bt = () => {
        if (!himport) {
            return null;
        }

        if (hreturn) {
            return (
                <div className="mr-4">
                    <BtImport label={label} umd={umd} hcmd={himport}/>
                </div>
            );
        }

        return <BtImport label={label} umd={umd} hcmd={himport}/>;
    };

    const Fab = () => {
        if (hreturn) {
            return <Ret hcmd={hreturn}/>;
        }
        return null;
    };

    const Right = () => (
        <div className="inline-flex">
            {right}
            <Bt/>
            <Fab/>
        </div>
    );

    return (
        <div>
            <PanelTitle left={left} right={<Right/>} cl={cl}/>
            {children}
            <WaitUmd umd={umd}/>
        </div>
    );
};

const W_DIFF = 2;

const FitWidth = ({ className, children, sideopen, w=0 }) => {
    const [width, setWidth] = useState(getClientW(sideopen) - W_DIFF - w);

    useEffect(() => {
        const onResize = () => {
            const w = getClientW(sideopen);
            setWidth(w - W_DIFF);
        }

        window.addEventListener('resize', onResize)

        return () => window.removeEventListener('resize', onResize);
    }, [sideopen]);

    return (
        <div style={{ width: width }} className={className}>
            {children}
        </div>
    );
};

export {FitWidth, ImView, CenterView};
